<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Cartpool</title>

		<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
		<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
    
		<!--[if IE 6]>
			<link rel="stylesheet" href="css/IE.css" type="text/css" />
		<![endif]-->  
	
		<!-- Base jQuery library -->
		<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
		
		<!-- JSrepeater: templating engine: http://jsrepeater.devprog.com/  -->		
		<script src="js/jquery.jsrepeater-1.1.js" type="text/javascript"></script>

		<!-- does nodeToObject and toXMLString -->
		<script src="js/XmlUtils.js" type="text/javascript"></script>
		
		<!-- handy form submitting ajax stuff -->
		<script src="js/jquery.form.js" type="text/javascript"></script>
			
		<!-- converts to json string and back -->
		<script src="js/jquery.json-1.3.min.js" type="text/javascript"></script>
			
		<script src="js/jquery.md5.js" type="text/javascript"></script>
		<script src="js/jquery.accordion-1.2.2.js" type="text/javascript"></script>
		<script src="js/jquery.cookie.js" type="text/javascript"></script>
		<script src="js/jquery.clearinginput.js" type="text/javascript"></script>
		<script src="js/jquery.autogrow.js" type="text/javascript"></script>

		<!-- swfAddres like deeplinking library -->
		<script src="js/jquery.address-1.0.min.js" type="text/javascript"></script>
			
		<!-- handles pretty date formatting -->
		<script src="js/pretty.js" type="text/javascript"></script>	
		
		<!-- handles xml parsing -->
		<script src="js/jkl-parsexml.js" type="text/javascript"></script>
		
		<!-- for this site!! handles all navigation, deeplinking -->
		<script src="js/cartpool_navigation.js" type="text/javascript"></script>	
		
		<!-- for this site!! handles all session stuff and home forms submit code -->
		<script src="js/cartpool_homeSessionHandling.js" type="text/javascript"></script>	
		
		<!-- for this site!! handles all repeaters and data parsing -->
		<script src="js/cartpool_shoppingListDataHandling.js" type="text/javascript"></script>
	</head>
	
	<body>
		
		<div class="container_12">
		
			<!-- LOGO AND HEADER -->
			<div class="grid_4">
				<img src="images/logo.png" style="padding-bottom:16px;" />
			</div>		
				
			<div id="headerNavigation" class="grid_8">
				<a id="navHome" href="#/home/login" rel="address:/home/login">Home</a>
				<a id="navShoppingList" href="#/shoppinglist/edit" rel="address:/shoppinglist/edit" class="last">Shoppinglist</a>
				<!-- <a id="navHistory" href="#/history" rel="address:/history">History</a>
				<a id="navProfile" href="#/profile" rel="address:/profile">Profile</a>
				<a id="navHelp" href="#/help" rel="address:/help" class="last">Help</a>-->
			</div>
			
			<div id="headerLoginInfoRepeater">
				Welcome ${name}	| <b>&#128; ${saldo}</b> | <a href="#/logout/" rel="address:/logout">logout</a>
			</div>
		
			<div class="grid_12 headerSpacer">&nbsp;</div>

			<div id="feedback">&nbsp;</div>


			<!-- ******************************* HOME ********************************* -->
			<div id="homeTab" class="grid_12">
				
				<div class="grid_4 alpha">				
					
					<div id="formsContainer" class="grid_4 alpha omega">		
						<!-- LOGIN FORM -->
						<a href="/home/login" rel="address:/home/login">
							<span class="formButton grid_4 alpha omega">LOGIN</span>
							<span class="subFormButton">I already have an account.</span>
						</a>
						<div id="loginFormContainer" class="grid_4 alpha omega">		
							<form id="loginForm" action="login" method="post">  
			 
									<label for="loginEmail">Email:</label>  
									<input id="loginEmail" name="email" class="text" type="text" />  
		
									<label for="loginGroupName">Group name:</label>  
									<input id="loginGroupName" name="groupName" class="text" type="text" />  
						
									<label for="loginPassword">Password:</label>
									<input id="loginPassword" name="password" class="text" type="password" />
									<input class="submit" type="submit" value="Login" />  
					
							</form>
						</div>
						
						
						<!-- REGISTER FORM -->
						<a href="/home/register" rel="address:/home/register">
							<span class="formButton grid_4 alpha omega">REGISTER</span>
							<span class="subFormButton">I don't have an account</span>
						</a>
						<div id="registerFormContainer" class="grid_4 alpha omega">
							<form id="registerForm" action="register" method="post">  
				
									<label for="registerUserName">Name:</label>  
									<input id="registerUserName" name="userName" class="text" type="text" />  
	
									<label for="registerEmail">Email:</label>  
									<input id="registerEmail" name="email" class="text" type="text" />  
	
									<label for="registerPassword">Password:</label>  
									<input id="registerPassword" name="password" class="text" type="password" />  
	
									<label for="registerGroupName">Group name:</label>  
									<input id="registerGroupName" name="groupName" class="text" type="text" onKeyup="checkExists()"  />  
					 
									<div id="groupPassItem">  
										<label for="registerGroupPass">Group key:</label>  
										<input id="registerGroupPass" name="groupPass" class="text" type="text" />  
									</div>
									<input class="submit" type="submit" value="Register" />
				
							</form>
						</div>
					</div>

					
					<!-- HOME LOGIN INFO -->
					<div id="homeLoginInfo" class="grid_4 alpha">
						<div id="homeLoginInfoRepeater">
							Welcome back ${name},<br/>
							your current saldo is <b>&#128; ${saldo}</b><br/><br/>
						</div>
						<div>
							Continue to the <a id="navShoppingList" href="/shoppinglist" rel="address:/shoppinglist">shoppinglist</a>
							<br/>
							<br/>
							<a href="#/logout/" rel="address:/logout">logout</a>
						</div>
					</div>
				</div>


				<div class="grid_8 omega">
					<img class="grid_8 alpha omega" src="images/comicImage.jpg" />
				</div>
				<div class="prefix_4 grid_8 omega">
					Gonna have to split into many servlets instead of using 1 and an action parameter. App engine cpu power sometimes peaks and can't see on what function.
				</div>
			</div>





			<!-- ******************************* SHOPLIST ********************************* -->
			<div id="shopListTab" class="grid_12">
				<div id="categoriesContainer" class="grid_3 alpha">
				
					<h1>Producten</h1>
					<h2>Wat wil je bestellen?</h2>
								
					<input id="searchProduct" type="text" value="Search" />
					
					<ul id="ac_categories">
						<li>
							<a>Zuivel</a>
							<p>
								<div>Melk (fles)</div>
								<div>Yougurt</div>
								<div>Eireren</div>
							</p>
						</li>
						<li>
							<a>Drank</a>
							<p>
								<div>Coca-cola (fles)</div>
								<div>Coca-cola (blik)</div>
								<div>Fanta</div>
								<div>Cranberry Juice</div>
								<div>Aquarius Red Blast (6 pack)</div>
							</p>
						</li>
						<li>
							<a>Groenten en fruit</a>
							<p>
								<div>Jona Gold Appel</div>
								<div>Peer</div>
								<div>Tomaat</div>
								<div>Banaan</div>
								<div>Artisjokken hart</div>
							</p>
						</li>
					</ul>
				
				</div>
				
				<div id="ordersContainer" class="grid_6">
				
					<h1>Bestellijst <span id="shoppingListDate">${date}</span></h1>
					<h2>Neem deze lijst mee!</h2>
					
					<div class="tabButton tabButtonEnd">&nbsp;</div>					
					<a id="btnEdit" class="tabButton inactiveTabButton" href="#/shoppinglist/print" rel="address:/shoppinglist/print">All Orders</a>
					<a id="btnPrint" class="tabButton activeTabButton" href="#/shoppinglist/edit" rel="address:/shoppinglist/edit">My Orders</a>
				
					<div id="shoppingListTab_orders">
						
						<div id="editTabContent">
							<div id="editOrdersRepeater" class="ordersRepeater">
								<div class="orderItem %{firstOrder|} %{oddOrder:evenOrder} %{||lastOrder}">
									<p class="orderButton minBtn" onclick="removeOrderCount('${key}')">&nbsp;</p>
									<input id="quantity_${key}" style="width:27px; text-align: center;" onchange="updateOrderQuantity(this, '${key}')" type="text" value="${quantity}" />
									<p class="orderButton plusBtn" onclick="addOrderCount('${key}')">&nbsp;</p>
									<input id="product_${key}" style="width:303px; margin-left:10px; font-size: 13px;" onchange="updateOrderProduct(this, '${key}')" type="text" value="${product} " />
									<p onclick="deleteOrder('${key}')" class="orderButton closeBtn">&nbsp;</p>
									<p id="commentBtn_${key}" class="orderButton commentBtn">&nbsp;</p>&nbsp;
									<textarea id="description_${key}" key="${key}" onchange="updateOrderDescription(this, '${key}')">${description} </textarea>
								</div>
							</div>
						</div>
						
						<div id="printTabContent">
							<div id="printOrdersRepeater" class="ordersRepeater printOrdersRepeater">
								<div class="orderItem printOrderItem %{firstOrder|} %{oddOrder:evenOrder} %{||lastOrder}">
									<p style="width:17px;" class="printQuantity">${quantity}</p>
									<p style="width:405px;">${product}</p>
									<p style="width:150px; text-align: right; ">${userName}</p>
									<input id="price_${key}" type="text" onchange="updateOrderPrice(this, '${key}')" value="${price}" />&nbsp;
								</div>
							</div>
							
							<div class="totalBreaker">&nbsp;</div>
							<div id="totalOrderPrice" style="width:650px; text-align: right; font-size: 16px; color:#ffffff;">00.00</div>

							<div><input type="button" id="closeListButton" value="Close this list" onclick="closeOpenList()" /></div>
							<div><input type="button" id="createNewList" value="Create a new list" onclick="createShoppingList();" /></div>
					
						</div>
						
					
					</div>
				</div>
				
				<div id="userSaldoContainer" class="grid_3 omega">
					<h1>Saldo</h1>
					<h2>&nbsp;</h2><br/>
				
					<div id="userSaldoRepeater">
						<div class="%{evenRow:oddRow}">
							<div style="width:150px; float:left;">${name}</div>
							<div style="float:right;">${saldo}</div>
						</div>
					</div>
				</div>
			</div>

			<!-- ******************************* HISTORY ********************************* -->
			<div id="historyTab" class="grid_12">
				&nbsp;
			</div>

			<!-- ******************************* PROFILE ********************************* -->
			<div id="profileTab" class="grid_12">
				&nbsp;
			</div>
			
			<!-- ******************************* HELP ********************************* -->
			<div id="helpTab" class="grid_12">
				&nbsp;
			</div>

			
			<!-- FOOTER -->
			<div class="grid_12" style="padding-top: 40px; text-align: right;">
				scond2009
			</div>
			
			<div class="clear">&nbsp;</div> <!-- clearfix op container_12 => left align in IE6 -->
		</div>

	</body>
</html>